<template>
  <!--  这是粒子效果-->

  <vue-particles
      color="#000"
      :particleOpacity="0.7"
      :particlesNumber="60"
      shapeType="circle"
      :particleSize="4"
      linesColor="#000"
      :linesWidth="1"
      :lineLinked="true"
      :lineOpacity="0.4"
      :linesDistance="150"
      :moveSpeed="2"
      :hoverEffect="true"
      hoverMode="grab"
      :clickEffect="true"
      clickMode="push"
      class="lizi"
  >
  </vue-particles>
  <el-row :gutter="0" class="layout3">
  <el-col
        v-for="(item,i) in tableData"
        :key="item.id"
        :span="12"
        :offset="0"
        style="align-content: center;"
    >
      <el-card v-if="i==tableData.length-1&&this.formMsg.role==1"  style="cursor: pointer;width:80%;height: 15vw;margin-left: 10%"
               align="center" @click="add">
        <span style="font-size: 2.5vw;">点击添加卡片</span>
      </el-card>
      <el-card v-else  style="width:80%;height: 15vw;margin-left: 10%"
               align="center">
        <template #header>
          <div class="card-header" :inline="true">
            <span style="font-size: 1.8vw" >{{item.title}}</span>
            <router-link :to="'/WebPage3_1?pageIndex='+this.$route.query.pageId+'&index='+item.id">
              <el-button class="button" style="float: right;background-color: #4E798C" size="large" @click="">
                <el-icon size="1.5vw" style="color: #FFFFFF">
                  <ArrowDown/>
                </el-icon>
              </el-button>
            </router-link>
          </div>
        </template>
          <div class="card-header2" :inline="true" style="transform: translateY(-1vw)">
            <span style="font-size: 1.5vw">{{item.author.replace(',',' ')}}</span>
          </div>
          <div id="app" style="margin-top: 0vw">
            <span class="content" style="font-size: 1.5vw;width:100%;">{{sliceStr((ToText)(item.content),30)}}</span>
          </div>
      </el-card>
      <div style="height: 1.5vw;"></div>
    </el-col>
  </el-row>

</template>

<script>
import request from "@/utils/request";
import {computed} from "vue";
import E from 'wangeditor'
import {ArrowDownBold,ArrowDown}  from '@element-plus/icons-vue';

export default {
  name: "WebPage3",
  components:{
    ArrowDownBold,
    ArrowDown,
  },
  setup(props,context){
    const sliceStr= computed(()=>{
      return function (val,len){
        return val.length>len?val.slice(0,len)+"...":val
      }
    })
    return {sliceStr}
  },
  data(){
    return{
      form:{},
      formMsg:{},
      tableData:[
      ],
    }
  },
  created() {
    let str=sessionStorage.getItem("user")||"{}"
    this.formMsg=JSON.parse(str);
    request.get("/user/"+this.formMsg.id).then(res=>{
      if(res.code==='0'){
        this.formMsg=res.data;
      }
    })
    this.load();
  },
  methods: {
    load() {
      request.get("/webpage3", {
        params:{
          search:this.$route.query.pageId,
        }
      }).then(res => {
        console.log(res);
        this.tableData = res;
        if(this.formMsg.role==1)
        this.tableData.push({});
      })
    },
    ToText(HTML)
    {
      var input = HTML;
      return input.replace(/<(style|script|iframe)[^>]*?>[\s\S]+?<\/\1\s*>/gi,'').replace(/<[^>]+?>/g,'').replace(/\s+/g,' ').replace(/ /g,' ').replace(/>/g,' ');
    },
    add(){
      this.form={};
      this.form.title="无";
      this.form.author="无";
      this.form.pageId=this.$route.query.pageId;
      this.form.content="无";
      request.post("/webpage3",this.form).then(res=>{
            console.log(res);
            this.load();
      }
      )
    },
  }
}
</script >

<style scoped>
.layout3{
  position: absolute;
  left:5%;
  width: 90%;
  top: 6vw;
}
</style>